<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .green {
    color: green;
  }
</style>

<body>
  <button class="green">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
</body>
<script>
  //选择所有的按钮
  let btns = document.querySelectorAll('button');
  //添加点击事件
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
      //先选择是绿色的类，进行取消
      document.querySelector('.green').className = '';
      //再添加点击的按钮为绿色
      this.className = 'green';
    })
  }
</script>

</html>